import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import { Form } from 'antd'
import { widgetType } from 'constants'

// import Style from './operate.css'

class operateForm extends Component {
  constructor (props) {
    super(props)
    this.state = {
      pageSize: 20,
      pageNo: 1,
      params: {}
    }
  }

  componentDidMount () {
    this.props.operateSearch({
      pageNo: 1,
      pageSize: 20
    })
  }

  getFilterCols (departmentList) {
    return [
      {
        label: '操作人员',
        id: 'operator',
        widget: widgetType.input,
        placeholder: '请输入'
      }, {
        label: '操作日期',
        id: 'time',
        widget: widgetType.dateRangePicker,
        placeholder: '请选择'
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
        width: 100
      },
      {
        title: '操作者',
        dataIndex: 'operator',
        key: 'operator',
        width: 100

      },
      {
        title: '操作日期',
        dataIndex: 'operateTime',
        key: 'operateTime',
        width: 100,
        sorter: (a, b) => a.operateTime - b.operateTime

      },
      {
        title: 'IP地址',
        dataIndex: 'ip',
        key: 'ip',
        width: 100
      },
      {
        title: '操作记录',
        dataIndex: 'content',
        key: 'content',
        width: 100
        // sorter: (a, b) => a.createTime - b.createTime
      }
    ]
  }

  reset = () => {
    this.setState({
      pageNo: 1,
      pageSize: 20
    })
    this.props.operateSearch({
      pageNo: 1,
      pageSize: 20
    })
  }

  search = (values = {}) => {
    // const { pageSize, pageNo } = this.state
    values.pageNo = 1
    values.pageSize = 20
    if (values.time && values.time.length) {
      values.startTime = values.time[0].format('YYYY-MM-DD 00:00:00')
      values.endTime = values.time[0].format('YYYY-MM-DD 23:59:59')
    }
    delete values.time
    this.setState({
      params: values
    })
    this.props.operateSearch(values)
  }

  onPageChange = (no, size) => {
    const { params = {} } = this.state
    this.setState({
      pageNo: no
    })
    params.pageNo = no
    params.pageSize = size
    this.props.operateSearch(params)
  }

  onShowSizeChange = (current, pageSize) => {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.operateSearch(params)
  }

  render () {
    const { form, operateData } = this.props
    const { pageNo, pageSize } = this.state

    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: operateData && operateData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange

    }
    return (
      <div>
        <Filters cols={this.getFilterCols()} form={form} search={this.search} reset={this.reset} />
        <CustomTable loading={!operateData} columns={this.getTableCols()} dataSource={(operateData && operateData.list) || []} pagination={pagination} />
      </div>
    )
  }
}

operateForm.propTypes = {
  form: PropTypes.any,
  operateData: PropTypes.any,
  operateSearch: PropTypes.func
}

const operate = Form.create()(operateForm)

export default operate
